Les propietats width i height en CSS són molt importants i controlen l'amplada i l'alçada de les nostres caixes.
Per explicar-ho, anem al nostre fitxer html d'exercici i en un fons fosc, creem dues caixes: una anomenada "element de block" i una altra anomenada "element de linia" amb les seves classes, block i inline respectivament.
<div class="block">Element de block</div>
<a href="#" class="inline">Element de linia</a>
Primer de tot, al body, posem un background-color obscur i una lletra clara.
body {
background-color: #333;
color: #fff;
}
El tema dels colors ja el veurem més endavant. No us preocupeu.
Creem les dues caixes amb les seves classes. L'element de block li posem un fons purple i a l'element de linia un fons lightcoral i també un color inherit perquè heredi el color del body.
.block{
background-color: purple;
}
.inline{
background-color: lightcoral;
color: inherit;
}
Les propietats d'ample i alt d'una caixa funcionen amb les propietats width i height. Posem un width de 100px o 200 px i el mateix amb el height.
Amb els elements inline, no funciona així. Si a .inline li donem un width de 200 px no passa absolutament res. Si li donem un alt de 200 px tampoc funciona. Els elements de linia no tenen medesures. El tamnay d'un element en línia el determina el seu contingut. Això és el més important i no ho heu d'oblidar mai.